<template name="bookItem">
	<view class="container" @click="toDetail">
		<view class="container-top">
			<view class="bookTitle">{{item.name}}</view>
			<view class="author">——{{item.author}}</view>
		</view>
		<view class="container-bottom">
			<view class="bookImg">
				<image :src="item.imageAddress"></image>
			</view>
			<text class="text">
				{{item.managerComment}}
			</text>
		</view> 
	</view>
</template>

<script>
	export default {
		name:"bookItem",
		data() {
			return {
				
			};	
		},
		props: {
		    item: {
		        type: Object,
		        value: null
		    }
		},
		methods:{
			toDetail() {
				const item = JSON.stringify(this.item)
				console.log(this.item)
				wx.navigateTo({
					url: '/pages/detail/detail?item='+ encodeURIComponent(item)
				})
			}
		}
	}
</script>

<style>
	.container{
		background-color: #ffffff;
		/* width: 100%; */
		margin: 10px;
		border-radius: 17px;
		height: 290rpx;
		padding: 15px;
		padding-bottom: 100rpx;
	}
	.container .container-top , .container-bottom{
		display: flex;
	}
	.container-top {
		padding-right: 20px;
		justify-content: space-between;
	}
	.container-top .bookTitle{
		font-size: 40rpx;
		color: #3C2B79;
		font-weight: bold;
	}
	.container-top .author{
		margin-top: 10px;
		color: #3C2B7B;
		font-size: 24rpx;
	}
	.container-bottom{
		background-color: #EBEBF7;
		padding: 15px;
		border-radius:30px;
		margin-top: 10px;
	}
	.container-bottom .bookImg image{
		width: 160rpx;
		height: 200rpx;
/* 		margin: 10px 0px; */
	}
	.container-bottom .text {
		font-size: 26rpx;
		height: 140rpx;
		margin-left: 5px;
		color: #3C2B7B;
		/* 需要有宽度 */
		    width: 450rpx;
		    /* 超过了就隐藏 */
			
		            overflow: hidden;
		            word-break: break-all;  /* break-all(允许在单词内换行。) */
		            text-overflow: ellipsis;  /* 超出部分省略号 */
		            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		            -webkit-line-clamp: 4; /** 显示的行数 **/
	}
</style>
